<template>
  <div v-if="type == 4" class="c-charge">
    <div class="txt">
      <div class="txt-value">{{ percentage }}</div>
      <div class="txt-name">{{ name }}</div>
    </div>
    <div class="box box1"></div>
    <div class="box box2"></div>
    <div class="box box3"></div>
    <div class="box box4"></div>
  </div>
  <data-v-chart
    v-else
    @set-opt="onSet"
    style="width: 300px; height: 300px; display: inline-block"
  ></data-v-chart>
</template>

<script>
import { optFromData } from "./opt";
import { opt2FromData } from "./opt2";
import { opt3FromData } from "./opt3";
import { opt5FromData } from "./opt5";

export default {
  name: "data-v-percentage",
  props: {
    name: {
      type: String,
      default: "默认数据名称"
    },
    value: {
      type: [String, Number],
      default: 0.0001
    },
    type: {
      type: [String, Number],
      default: 1
    }
  },

  computed: {
    percentage() {
      let value = this.value;
      if (value > 1) {
        value = 1;
      }
      let p = (value * 100).toFixed(2) + "%";
      return p;
    }
  },

  watch: {
    name() {
      this.updateChart();
    },
    value() {
      this.updateChart();
    }
  },
  methods: {
    onSet(chart) {
      this.chart = chart;
      this.updateChart();
    },

    updateChart() {
      if (this.type == 1) {
        let opt = optFromData(this.name, this.value);
        this.chart.setOption(opt);
      } else if (this.type == 2) {
        let opt2 = opt2FromData(this.name, this.value);
        this.chart.setOption(opt2);
      } else if (this.type == 3) {
        let opt3 = opt3FromData(this.name, this.value);
        this.chart.setOption(opt3);
      } else if (this.type == 4) {
        // 4时这里不做处理
      } else if (this.type == 5) {
        let opt5 = opt5FromData(this.name, this.value);
        this.chart.setOption(opt5);
        // 
      }
    }
  }
};
</script>

<style lang="less">
.c-charge {
  display: inline-block;
  text-align: center;
  width: 300px;
  height: 300px;
  position: relative;
  .box {
    width: 150px;
    height: 150px;
    /* background: #fff; */
    border-radius: 45%;
    background: linear-gradient(to right, #054488, #04b5e6);

    position: absolute;

    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(0);

    animation: charge-rotate 5s infinite linear;
  }

  .txt {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    left: 50%;
    top: 52%;
    transform: translate(-50%, -50%) rotate(0);
    border-radius: 50%;
    position: absolute;
    width: 120px;
    height: 120px;
    background: linear-gradient(to right, #366fa2, #42b6dd);
    z-index: 4;
  }
  .txt-value {
    font-size: 24px;
  }
  .txt-name {
    font-size: 14px;
    opacity: 0.5;
  }
  .box1 {
    opacity: 0.8;
    border-radius: 45%;
    animation-duration: 5s;
    z-index: 3;
  }

  .box2 {
    top: 53%;
    /* left: 53%; */
    opacity: 0.8;
    border-radius: 48%;
    animation-duration: 6s;
    z-index: 2;
  }

  .box3 {
    width: 180px;
    height: 180px;
    opacity: 0.3;
    top: 50%;
    border-radius: 45%;
    animation-duration: 10s;
    z-index: 1;
  }
  .box4 {
    width: 220px;
    height: 220px;
    opacity: 0.2;
    top: 50%;
    border-radius: 45%;
    animation-duration: 15s;
    z-index: 0;
  }

  @keyframes charge-rotate {
    0% {
      transform: translate(-50%, -50%) rotate(0);
    }

    50% {
      transform: translate(-50%, -45%) rotate(180deg);
    }

    100% {
      transform: translate(-50%, -50%) rotate(360deg);
    }
  }
}
</style>
